<template>
  <div>
    <div class="comment">
      <div>
        <img :src="item.user.avatarUrl" alt="" />
      </div>
      <div>
        <div class="text1">{{ item.user.nickname }}</div>
        <div class="text2">{{ item.time |formatDate }}</div>
      </div>
      <div class="dianzan">
        <div class="text3">
          {{ item.likedCount }}
          <img
            class="icon"
            src="https://ts1.cn.mm.bing.net/th/id/R-C.d2208b1ce7a857a8f7e7e1bf30ed2d74?rik=1ysJa%2bzYIxf13Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f01%2f39%2f70%2f97573ccfa18c495.jpg&ehk=pZ9yNDrX%2bTsmPN8CENxj1exLpE2LksNCRgn8Z%2bCkIG0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="contextText">{{ item.content }}</div>
   
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },

filters: {
    formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      }
    }
};
</script>

<style lang="scss" scoped>

.contextText{
  margin-left: 50rem;
  margin-top: 17rem;
  margin-right: 20rem;
  font-size: 15rem;
  border-bottom: 1px solid #f4f4f4;
  padding-bottom: 17rem;
}
.comment {
  display: flex;
  position: relative;
  margin-top: 5rem;
  img {
    width: 30rem;
    height: 30rem;
    border-radius: 15rem;
    margin-left: 10rem;
    margin-right: 10rem;
    margin-top: 10rem;
   
  }
  .text1 {
    font-size: 14rem;
    color: #666;
    margin-top: 10rem;
  }
  .text2 {
    margin-top: 5rem;
    font-size: 12rem;
    color: #999;
  }
  .dianzan {
    position: absolute;
    right: 0;
    top: -20rem;
    .text3 {
      margin-top: 12rem;
      font-size: 12rem;
      color: #999;
    }
    .icon {
      position: relative;
      height: 20rem;
      width: 20rem;
      top:5rem;
     
    }
  }
}
</style>